<template>
  <div class="submit">
    <template v-if="!orderInfo || !PriceComputed || !userInfo">
      <div class="loading">
        <svg
          t="1616053408617"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="17643"
          width="64"
          height="64"
        >
          <path
            d="M739.487 798.497v-78.751c0-86.667-49.501-164.599-124.671-202.725 75.171-38.137 124.671-116.076 124.671-202.735v-78.747c34.78-1.811 62.499-30.658 62.499-65.863 0-36.359-29.582-65.941-65.972-65.941H287.953c-36.358 0-65.941 29.581-65.941 65.941 0 35.217 27.738 64.072 62.505 65.866v78.743c0 86.661 49.495 164.592 124.666 202.735-75.171 38.127-124.666 116.059-124.666 202.726v78.748c-34.768 1.793-62.505 30.646-62.505 65.868 0 36.368 29.582 65.95 65.941 65.95h448.061c36.39 0 65.972-29.581 65.972-65.95 0-35.21-27.719-64.054-62.499-65.865zM256.513 169.678c0-17.337 14.117-31.44 31.44-31.44h448.061c17.353 0 31.472 14.102 31.472 31.44 0 17.332-14.119 31.45-31.472 31.45H287.953c-17.322-0.001-31.44-14.118-31.44-31.45z m62.504 550.068c0-86.86 58.626-163.385 142.559-186.056a17.26 17.26 0 0 0 12.734-16.661c0-7.785-5.22-14.626-12.734-16.646-83.933-22.709-142.559-99.227-142.559-186.094v-78.655H704.98v78.655c0 86.867-58.626 163.385-142.559 186.094-7.515 2.021-12.735 8.862-12.735 16.646a17.262 17.262 0 0 0 12.735 16.661c83.933 22.673 142.559 99.196 142.559 186.056v78.659H670c-8.233-28.4-34.42-49.172-65.478-49.172h-75.286V474.897c80.982-8.637 144.278-77.368 144.278-160.603v-17.381H350.466v17.381c0 83.232 63.29 151.961 144.262 160.602v274.337H419.45c-31.053 0-57.241 20.771-65.473 49.172h-34.964v-78.659z m416.998 176.066H287.954c-17.322 0-31.44-14.117-31.44-31.455 0-17.332 14.117-31.45 31.44-31.45h448.061c17.353 0 31.472 14.119 31.472 31.45 0 17.337-14.119 31.455-31.472 31.455z"
            p-id="17644"
            fill="#1296db"
          ></path>
        </svg>
        <span class="loading_text">加载中...</span>
      </div>
    </template>
    <template v-else>
      <div class="submit_header">
        <div class="address">
          <div class="address_type">
            <span>快递配送</span>
            <span @click="PickUpStore">到店自提</span>
          </div>
          <div
            class="address_info"
            v-if="orderInfo"
            @click="addressShow = !addressShow"
          >
            <template v-if="AddressInfo">
              <div class="info_text">
                <div class="text_my">
                  <span>{{ AddressInfo.real_name }}</span>
                  <span>{{ AddressInfo.phone }}</span>
                </div>
                <div class="text_address">
                  <span v-if="AddressInfo.is_default == 1" style="color: red"
                    >[默认]</span
                  >
                  <span>{{
                    AddressInfo.province +
                    AddressInfo.city +
                    AddressInfo.district +
                    AddressInfo.detail
                  }}</span>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="address_info">设置收货地址</div>
            </template>
            <div class="info_icon">
              <van-icon name="arrow" size="0.4rem" color="#707079" />
            </div>
          </div>
        </div>
      </div>
      <div class="submit_content" v-if="orderInfo && PriceComputed">
        <div class="content_product">
          <p class="product_num">共{{ orderInfo.cartInfo.length }}件商品</p>
          <div
            class="product_params"
            v-for="item in orderInfo.cartInfo"
            :key="item.id"
          >
            <van-image :src="item.productInfo.image"></van-image>
            <div class="params_data">
              <p>{{ item.productInfo.store_name }}</p>
              <span>{{ item.productInfo.attrInfo.suk }}</span>
              <span>￥{{ item.productInfo.price }}</span>
              <span>x{{ item.cart_num }}</span>
            </div>
          </div>
        </div>
        <div class="content_discounts">
          <ul>
            <li>
              <span>优惠卷</span>
              <div class="discounts_right" @click="couponshow = true">
                <span>请选择</span>
                <van-icon name="arrow" size="0.35rem" />
              </div>
            </li>
            <li>
              <span>积分抵扣</span>
              <div class="discounts_right" @click="useIntegral">
                <van-checkbox v-model="checked" checked-color="#ee0a24">
                  <span>当前积分</span>
                  <span style="color: #fc4141; margin: 0 5px">{{
                    userInfo.integral
                  }}</span>
                </van-checkbox>
              </div>
            </li>
            <li>
              <span>快递费用</span>
              <div class="discounts_right">
                <span v-if="orderInfo.priceGroup.storePostage"
                  >￥{{ orderInfo.priceGroup.storePostage }}</span
                >
                <span v-else>免运费</span>
              </div>
            </li>
            <li>
              <span>备注信息</span>
              <van-field
                v-model="message"
                rows="2"
                type="textarea"
                maxlength="150"
                placeholder="请添加备注（150字以内）"
                show-word-limit
              />
            </li>
          </ul>
        </div>
        <div class="content_payType">
          <p class="payType_title">支付方式</p>
          <div
            :class="{ payType_wx: true, currentPayType: payType == 0 }"
            @click="payType = 0"
          >
            <div>
              <van-icon name="wechat" color="white" size="0.4rem" />
              <span>微信支付</span>
            </div>
            <div>
              <span>微信快捷支付</span>
            </div>
          </div>
          <div
            :class="{
              payType_my: true,
              payType_wx: true,
              currentPayType: payType == 1,
            }"
            @click="payType = 1"
          >
            <div>
              <van-icon name="gold-coin" color="#fe960f" size="0.5rem" />
              <span>余额支付</span>
            </div>
            <div>可用余额：{{ userInfo.now_money }}</div>
          </div>
        </div>
        <div class="content_totalPrice">
          <div>
            <span>商品总价：</span>
            <span>￥{{ PriceComputed.total_price }}</span>
          </div>
          <div v-if="PriceComputed.pay_postage != 0">
            <span>运费：</span>
            <span>+￥{{ PriceComputed.pay_postage }}</span>
          </div>
          <div v-if="PriceComputed.deduction_price != 0">
            <span>积分抵扣：</span>
            <span>-￥{{ PriceComputed.deduction_price }}</span>
          </div>
        </div>
      </div>
      <div class="closeCount" v-if="PriceComputed">
        <div class="closeCount_total">
          <span>合计：</span>
          <span>￥{{ PriceComputed.pay_price }}</span>
        </div>
        <div class="closeCount_affirm" @click="settleAccounts">立即结算</div>
      </div>
      <van-action-sheet v-model="addressShow" title="选择地址">
        <div
          class="content"
          v-for="(item, index) in addresList"
          :key="item.id"
          @click="SetCurrentAddress(item, index)"
          :style="'color:' + (index == CurrentAddress ? 'red' : 'black')"
        >
          <div class="content_address">
            <van-icon name="location-o" size="0.35rem" />
            <div class="address_detail">
              <p>
                <span>{{ item.real_name }}</span>
                <span>{{ item.phone }}</span>
              </p>
              <span>{{
                item.province + item.city + item.district + item.detail
              }}</span>
            </div>
          </div>
          <div class="content_icon">
            <van-icon name="success" size="0.35rem" />
          </div>
        </div>
        <div class="content_add_address" @click="ToAddAddress">
          <div>添加地址</div>
        </div>
      </van-action-sheet>
      <van-popup
        v-model="couponshow"
        round
        position="bottom"
        :closeable="true"
        v-if="userInfo"
      >
        <p class="select_coupon_title">优惠劵</p>
        <div class="no_coupon" v-if="userInfo.couponCount == 0">
          <img src="http://47.115.51.185/h5/img/noCoupon.e524084b.png" alt="" />
        </div>
      </van-popup>
    </template>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      userInfo: null,
      orderInfo: null,
      PriceComputed: null,
      checked: false,
      message: null,
      addressShow: false,
      CurrentAddress: null,
      AddressInfo: null,
      couponshow: false,
      payType: 1,
    };
  },
  created() {
    this.axios.get("/api/user").then((response) => {
      this.userInfo = response.data.data;
    });
    this.axios
      .post("/api/order/confirm", {
        cartId: this.$route.query.id,
      })
      .then((response) => {
        this.orderInfo = response.data.data;
        return this.orderInfo;
      })
      .then((res) => {
        this.axios
          .post("/api/order/computed/" + res.orderKey, {
            addressId: this.AddressInfo ? this.AddressInfo.id : "",
            couponId: 0,
            payType: "yue",
            shipping_tyoe: 1,
            useIntegral: 0,
          })
          .then((response) => {
            this.PriceComputed = response.data.data.result;
          });
      });
    if (this.addresList) {
      this.addresList.length > 0 ? this.CurrentAddress = 0 : true
      return;
    } else {
      this.axios.get("/api/address/list").then((response) => {
        this.getAddress(response.data.data);
      });
    }
  },
  computed: {
    ...mapState({
      addresList: (state) => {
        return state.data.addressList;
      },
    }),
  },
  methods: {
    ...mapMutations(["getAddress"]),
    PickUpStore() {
      this.$toast({
        message: "暂无门店信息，您无法选择到店自提！",
        icon: "close",
      });
    },
    SetCurrentAddress(item, index) {
      this.CurrentAddress = index;
      this.AddressInfo = item;
      this.addressShow = false;
    },
    ToAddAddress() {
      this.$router.push("/user/add_address");
    },
    useIntegral() {
      this.axios
        .post("/api/order/computed/" + this.orderInfo.orderKey, {
          addressId: this.AddressInfo ? this.AddressInfo.id : "",
          couponId: 0,
          payType: "yue",
          shipping_type: 1,
          useIntegral: this.checked ? 0 : 1,
        })
        .then((response) => {
          if (response.data.status != 200) {
            console.log(response);
          } else {
            this.PriceComputed = response.data.data.result;
          }
        });
    },
    settleAccounts() {
      if (!this.AddressInfo) {
        this.$toast("请添加收货地址");
        return;
      }
      this.axios
        .post("/api/order/create/" + this.orderInfo.orderKey, {
          addressId: this.AddressInfo.id,
          bargainId: 0,
          combinationId: 0,
          couponId: 0,
          from: "weixinh5",
          mark: "",
          payType: this.payType ? "yue" : "weixin",
          phone: "",
          pinkId: 0,
          real_name: "",
          seckill_id: 0,
          shipping_type: 1,
          store_id: 0,
          useIntegral: this.PriceComputed.deduction_price != 0 ? 1 : 0,
        })
        .then((response) => {
          this.$router.push({
            path: "/order/status",
            query: {
              id: response.data.data.result.orderId,
              msg: response.data.msg,
            },
            name: "status",
            params: {
              msg: response.data.msg,
              flag: true,
            },
          });
        });
    },
    ToAddManage() {
      this.$router.push("/user/add_manage");
    },
  },
  watch: {
    orderInfo() {
      this.AddressInfo = this.orderInfo.addressInfo;
    },
    addresList(n) {
      if (n.length != 0) {
        this.CurrentAddress = 0;
      }
    },
  },
};
</script>

<style lang="less">
.submit {
  width: 100%;
  .loading {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .loading_text {
      color: #272822;
    }
    @keyframes move {
      0% {
        transform: rotateZ(0deg);
      }

      15% {
        transform: rotateZ(180deg);
      }

      55% {
        transform: rotateZ(180deg);
      }

      70% {
        transform: rotateZ(360deg);
      }

      100% {
        transform: rotateZ(360deg);
      }
    }

    .icon {
      animation: move 4s linear 2s infinite;
    }
  }
  .submit_header {
    width: 100%;
    height: 126px;
    background-image: linear-gradient(to bottom, #e93323, white);
    padding: 10px 10px 0 10px;
    .address {
      width: 100%;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: repeating-linear-gradient(
          -45deg,
          #fe9f86 0,
          #fe9f86 20%,
          transparent 0,
          transparent 25%,
          #95bef9 0,
          #95bef9 45%,
          transparent 0,
          transparent 50%
        );
        background-size: 15%;
      }
      .address_type {
        width: 100%;
        display: flex;
        border-bottom: 1px solid #fadbd9;
        align-items: flex-end;
        span {
          font-size: 14px;
          color: #fc4141;
          text-align: center;
          flex: 1;
          border-radius: 3px 3px 0 0;
          &:nth-child(1) {
            height: 40px;
            line-height: 40px;
            background-color: #fff;
            position: relative;
            &::after {
              content: "";
              display: block;
              width: 160px;
              height: 90px;
              position: absolute;
              border: 39px solid transparent;
              border-bottom-width: 20px;
              border-left-color: white;
              transform: rotateZ(-90deg);
              top: -85.5px;
              right: -55px;
            }
          }
          &:nth-child(2) {
            height: 30px;
            line-height: 30px;
            background-color: #f7c1bd;
          }
        }
      }
      .address_info {
        width: 100%;
        height: 75px;
        background-color: #fff;
        padding: 0 15px 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info_text {
          font-size: 14px;
          .text_my {
            font-weight: bold;
            margin-bottom: 8px;
            span {
              &:nth-child(1) {
                margin-right: 30px;
              }
            }
          }
          .text_address {
            span {
              &:nth-child(1) {
                margin-right: 10px;
              }
              &:nth-child(2) {
                color: #666666;
              }
            }
          }
        }
      }
    }
  }
  .submit_content {
    width: 100%;
    margin-top: 5px;
    .content_product {
      width: 100%;
      background-color: #fff;
      .product_num {
        padding-left: 15px;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #f2f2f2;
      }
      .product_params {
        width: 100%;
        padding: 10px 15px;
        display: flex;
        .van-image {
          width: 65px;
          height: 65px;
          margin-right: 15px;
        }
        .params_data {
          flex: 1;
          font-size: 14px;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          > p {
            width: 230px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          span {
            font-size: 12px;
            &:nth-of-type(1),
            &:last-child {
              color: #868686;
            }
            &:nth-of-type(2) {
              font-size: 14px;
              color: #fc4141;
            }
            &:last-child {
              position: absolute;
              top: 0;
              right: 0;
            }
          }
        }
      }
    }
  }
  .content_discounts {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    ul {
      li {
        padding: 15px;
        border-bottom: 1px solid #f2f2f2;
        .discounts_right {
          display: flex;
          color: #999999;
          .van-icon-arrow {
            margin-left: 10px;
          }
          .van-checkbox {
            display: flex;
            flex-direction: row-reverse;
            .van-checkbox__icon {
              margin-left: 5px;
            }
          }
        }
        .van-field {
          background-color: #f9f9f9;
        }
        &:not(:last-child) {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }

  .content_payType {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 15px;
    padding-bottom: 15px;
    .payType_title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
    .payType_wx,
    .payType_my {
      width: 100%;
      height: 45px;
      border: 1px solid #f5f5f5;
    }
    @keyframes scale {
      0% {
        transform: scale(0);
      }
      75% {
        transform: scale(1);
      }
      85% {
        transform: scale(0.7);
      }
      90% {
        transform: scale(1);
      }
      95% {
        transform: scale(0.8);
      }
      100% {
        transform: scale(1);
      }
    }
    .currentPayType {
      border: 1px solid red;
      > div {
        &:nth-child(1) {
          span {
            color: red;
          }
          .van-icon {
            animation: scale 0.3s ease-out;
          }
        }
      }
    }
    .payType_my {
      margin-top: 10px;
    }
    .payType_wx {
      display: flex;
      align-items: center;
      > div {
        flex: 1;
        text-align: center;
        font-size: 14px;
        .van-icon-wechat {
          background-color: #41b035;
          border-radius: 50%;
          padding: 3px;
        }
        .van-icon {
          vertical-align: middle;
          margin-right: 8px;
        }
        &:nth-child(2) {
          color: #aaaaaa;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            display: block;
            width: 1px;
            height: 25px;
            background-color: #eee;
            top: -5px;
          }
        }
      }
    }
  }

  .content_totalPrice {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 10px 15px;
    margin-bottom: 60px;
    > div {
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      span {
        &:nth-child(2) {
          color: #868686;
        }
      }
    }
  }
  .closeCount {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    .closeCount_total {
      span {
        &:nth-child(2) {
          color: red;
        }
      }
    }
    .closeCount_affirm {
      background-color: #e93323;
      color: white;
      padding: 8px 25px;
      border-radius: 20px;
    }
  }
  .van-popup {
    .van-action-sheet__header {
      font-weight: bold;
    }
    .van-action-sheet__content {
      .content {
        width: 100%;
        height: 65px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;
        .content_address {
          height: 100%;
          display: flex;
          align-items: center;
          .address_detail {
            margin-left: 10px;
            font-size: 14px;
            > p {
              font-weight: bold;
              margin-bottom: 8px;
              span {
                &:nth-child(1) {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
      .content_add_address {
        width: 100%;
        padding: 0 10px;
        height: 40px;
        color: white;
        font-weight: bold;
        margin: 40px 0;
        > div {
          width: 100%;
          height: 100%;
          background-color: #e93323;
          border-radius: 20px;
          text-align: center;
          line-height: 40px;
        }
      }
    }
  }
  .select_coupon_title {
    font-weight: bold;
    text-align: center;
    height: 50px;
    line-height: 50px;
    background-color: #f5f5f5;
  }
  .no_coupon {
    width: 100%;
    height: 210px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    img {
      width: 207px;
      height: 168px;
    }
  }
}
</style>